<template>
	<view class="box">
		<u-navbar :title="tit" :fixed="true" :placeholder="true" :safeAreaInsetTop="true" :autoBack="false"
			leftIconColor="#666" titleStyle="color:#333" bgColor="#E0DDDA" @leftClick="leftClick"></u-navbar>
		<view class="pep_wrap">
			<view class="pep_item" v-for="item in merberlist.slice(0,15) " :key="item.id">
				<image :src="item.head_img" mode="aspectFill"></image>
				<text>{{item.nickname}}</text>
			</view>
		</view>
		<view class="tit" @click="gogroupnum" >
			查看全部群成员<uni-icons type="right" color="#ccc"></uni-icons>
		</view>
		<view class="btn"  v-if="is_admin!=0" @click="goyq" >
			邀请粉丝进群
		</view>
		<view class="wrap" @click="gogroupamend">
			<text>群信息</text>
			<uni-icons type="right" color="#666666" size="24"></uni-icons>
		</view>
<!-- 		<view class="wrap">
			<text>群公告</text>
			<uni-icons type="right" color="#fff" size="24"></uni-icons>
		</view> -->
		<view class="wrap">
			<text>屏蔽群消息</text>
			<u-switch v-model="isflag" @change="changestatus" activeColor="#A68A64"
				inactiveColor="rgb(230, 230, 230)"></u-switch>
		</view>
		<view class="wrap" v-if="is_admin!=0">
			<text>群禁言</text>
			<u-switch v-model="isflag2" @change="changestatus2" activeColor="#A68A64"
				inactiveColor="rgb(230, 230, 230)"></u-switch>
		</view>
		<!-- <view class="btn2">
			退出群聊
		</view> -->
	</view>
</template>

<script>
	import {
		groupDetails,
		groupMemberDetails,
		updateGroup,
		memberSetup
	} from "../../api/hx.js"
	import WebIM from "../../utils/WebIM.js"
	export default {
		data() {
			return {
				isflag: false,	
				isflag2: false,
				groupid: "",
				merberlist:[],
				isjy:0,
				detail:{},
				is_admin:"",
				tit:"",
				is_shield:""
			}
		},
		onLoad(option) {
			this.groupid = option.id
			this.groupdetail()
			this.getdetail()
		},
		onShow() {
			this.getdetail()
		},
		methods: {
			goyq(){
				uni.navigateTo({
					url:"/pagesMy/chat/invitemember?id="+this.groupid
				})
			},
			pb(){
				memberSetup({
					hx_group_id:this.groupid,
					is_shield:this.is_shield
				}).then(res=>{
					if(res.code==1){
						this.getdetail()
					}
					uni.$u.toast(res.msg)
				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			gogroupamend(){
				uni.navigateTo({
					url:"/pagesMy/chat/groupamend?id="+this.groupid
				})
			},
			up(){
				updateGroup({
					hx_group_id:this.groupid,
					mute:this.isjy,
				}).then(res=>{
					if(res.code==1){
						this.getdetail()
					}
					uni.$u.toast(res.msg)
					
				})
			},
			getdetail(){
				groupDetails({
					hx_group_id:this.groupid
				}).then(res=>{
					if(res.code==1){
						this.detail=res.data
						this.is_admin=res.data.group_member_one.is_admin
						this.is_shield=res.data.group_member_one.is_shield
						if(this.is_shield==0){
							this.isflag=false
						}
						if(this.is_shield==1){
							this.isflag=true
						}
						if(res.data.mute==0){
							this.isflag2=false
						}
						if(res.data.mute==1){
							this.isflag2=true
						}
						
						this.tit = `${this.detail.name}(${this.detail.member_number}人)`
					}
					console.log(res)
				})
			},
			groupdetail() {
				groupMemberDetails({
					hx_group_id: this.groupid,
					page:1
				}).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.merberlist=res.data.data
					}
					

				})
			},
			leftClick() {
				//获取页面栈的长度
				const canNavBack = getCurrentPages()
				console.log(canNavBack.length);
				// 判断是否刷新了浏览器，刷新了浏览器，页面栈只有当前一个
				if (canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					})
				}
			},
			
			gogroupnum() {
				uni.navigateTo({
					url: "/pagesMy/chat/groupnum?id="+this.groupid
				})
			},
			changestatus(e) {
				if(e==true){
					this.is_shield=1
					const options = {
					  conversations: [
					    {conversationId: this.groupid, conversationType: 'groupChat'}
					  ],
					  mark: 0,
					}
					
					uni.WebIM.conn.addConversationMark(options).then(() => {
					  console.log('addConversationMark success')
					})
					this.pb()
				}
				if(e==false){
					this.is_shield=0
					const options = {
					  conversations: [
					    {conversationId: this.groupid, conversationType: 'groupChat'}
					  ],
					  mark: 0,
					}
					
					uni.WebIM.conn.removeConversationMark(options).then(() => {
					  console.log('removeConversationMark success')
					})
					this.pb()
				}
				console.log(e)
			},
			changestatus2(e) {
				if(e==false){
					this.isjy=0
					this.up()
				}
				if(e==true){
					this.isjy=1
					this.up()
				}
			}
		}
	}
</script>
<style>
	page {
		background-color: #E0DDDA;
	}
</style>
<style lang="scss">
	.box {
		width: 750rpx;

	}
	/deep/.u-navbar__content__title{
		width: 600rpx;
		font-size: 28rpx !important;
	}
	.pep_wrap {
		width: 750rpx;
		max-height: 500rpx;
		margin-top: 40rpx;
		// background-color: red;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.pep_item {
		width: 150rpx;
		display: flex;
		flex-direction: column;
		// justify-content: center;
		align-items: center;
		margin-top: 20rpx;

		>image {
			width: 100rpx;
			border-radius: 50%;
			height: 100rpx;
		}

		>text {
			margin-top: 20rpx;
			text-align: center;
			width: 130rpx;
			white-space: nowrap;
			/* 防止文本换行 */
			overflow: hidden;
			/* 隐藏溢出的文本 */
			text-overflow: ellipsis;
			/* 当文本溢出时显示省略号 */
			font-size: 26rpx;
			color: #999999;
		}
	}

	.tit {
		font-weight: 400;
		font-size: 28rpx;
		color: #666;
		text-align: center;
		margin-top: 40rpx;
	}

	.btn {
		width: 690rpx;
		height: 88rpx;
		border-radius: 332rpx 332rpx 332rpx 332rpx;
		border: 2rpx solid #A68A64;
		font-weight: 400;
		font-size: 36rpx;
		color: #A68A64;
		text-align: center;
		line-height: 88rpx;
		margin: 0 auto;
		margin-top: 46rpx;
	}

	.wrap {
		width: 690rpx;
		margin: 0 auto;
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		height: 80rpx;
		justify-content: space-between;

		>text {
			font-weight: 400;
			font-size: 32rpx;
			color: #666666;
		}
	}

	.btn2 {
		width: 690rpx;
		height: 80rpx;
		background: #B8A185;
		border-radius: 376rpx 376rpx 376rpx 376rpx;
		font-weight: 400;
		font-size: 36rpx;
		color: #FF1616;
		text-align: center;
		line-height: 80rpx;
		margin: 0 auto;
		margin-top: 100rpx;
	}
</style>